<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css提示信息</title>
</head>
<body style="text-align:center;">

<h2>提示工具</h2>
<p>鼠标移动到以下文本:</p>

<div class="tooltip">鼠标移动到这里
    <span class="tooltiptext">提示文本</span>
</div>

</body>
<style>

.tooltiptext{
    visibility: hidden;
    padding: 10px;
    background: black;
    color: white;
    border-radius: 2px;
    position: absolute;
    bottom: 125%;
    left: 50%;

    transition: 2s;
    opacity: 0.5;
    display: inline-block;
}
.tooltip{
    position: relative;
}

    .tooltip:hover .tooltiptext{
        visibility: visible;
        opacity: 1;
    }
</style>

</html>